<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css"/>
    <script language="JavaScript" src="/js/jquery.js"></script>
    <script src="js/cloud.js" type="text/javascript"></script>
    <script language="JavaScript" src="/js/jquery-1.8.2.min.js"></script>
    <script src="js/jquery.params.js" type="text/javascript"></script>
    <script language="javascript">
        $(function () {
            $('.loginbox').css({'position': 'absolute', 'left': ($(window).width() - 692) / 2});
            $(window).resize(function () {
                $('.loginbox').css({'position': 'absolute', 'left': ($(window).width() - 692) / 2});
            })
        });


    </script>

</head>

<body style="background-color:#1c77ac; background-image:url(images/light.png); background-repeat:no-repeat; background-position:center top; overflow:hidden;">


<div id="mainBody">
    <div id="cloud1" class="cloud"></div>
    <div id="cloud2" class="cloud"></div>
</div>


<div class="loginbody">

    <span class="systemlogo"></span>

    <div class="loginbox">
        <form id="login" >
            <ul>
                <li><input id="username" name="username" type="text" value=""  class="loginuser" placeholder="请输入工号"
                           onclick="JavaScript:this.value=''"/></li>
                <li><input id="password" name="password" type="password" class="loginpwd" placeholder="请输入密码"
                           onclick="JavaScript:this.value=''"/></li>
                <li><select id="role" name="role" class="loginrole">
                    <option value="admin">仓库管理员</option>
                    <option value="superadmin">经理</option>
                    <option value="infoadmin">信息管理员</option>
                    <option value="waiter">服务员</option>
                </select></li>
                <li><input id="submit" type="button" class="loginbtn"  value="登录"/></li>
                <li><div id="msg"></div></li>
            </ul>
        </form>
    </div>


</div>


<div class="loginbm">238黄光辉</div>
<script type="text/javascript">
    $("#submit").on("click", function () {
        var params = $("#login").serializeArray();
        var j = {};
        for (var item in params) {
            j[params[item].name] = params[item].value;
        }
       /* alert(JSON.stringify(j));
        $.post(
            "/user/login",
            JSON.stringify(j),
            function (data) {
                alert(JSON.stringify(data));
            },
            "text"
        );*/
        //alert(JSON.stringify(j));
        $.ajax({
            url:'/user/login',
            data:JSON.stringify(j),
            type:'POST',
            dataType:'json',
            /*
           声明参数位json类型，便于后台接收时可以识别
            */
            headers:{
                Accept:"application/json",
                "Content-Type":"application/json"
            },
            processData:false,
            cache:false
        }).done(function (data) {
            var status=JSON.parse(data).status;
            var name=JSON.parse(data).name;
            //alert(status);
            if (status==0){
                alert("您好"+name +",恭喜您登陆成功，即将跳转到主页!");
                var url="/main.html?username="+j.username+"&name="+name+"&role="+j.role;
                //alert(url);
                window.location.href=url;
            }else if(status==1){
                alert("该用户不存在，请重新输入！");
            }else if (status==2){
                alert("密码输入有误，请重新输入！");
            }
        });
    });
</script>
</body>
</html>